@use 'src/components/style/foundation/colors' as colors;
@use 'src/components/style/foundation/spacing' as spacing;
@use 'src/components/style/foundation/typography' as typography;


.warning {
  padding: spacing.spacing(tight) spacing.spacing(base);
  border-radius: 3px;
  max-width: 500px;
  background-color: colors.color(alerts, warning-bg);
  color: colors.color(alerts, warning-text);
  font-size: typography.font-size(body, smaller);

  :global(.theme--dark) & {
    background-color: colors.color(alerts, warning-bg--dark);
    color: colors.color(alerts, warning-text--dark);
  }

  svg, span {
    vertical-align: middle;
    display: inline-block;
  }
  svg {
    fill: rgb(255, 167, 38);
    width: 24px;
    height: 24px;
    margin-right: spacing.spacing(tight);
  }
}
